@import '../../../scss/mixin';
@import '../../../scss/variable';

.cart {
    @include wh(100%, 100%);
    @include flex(column);
    background: #f7f7f8;
    .merit {
        @include wh(100%, 80px);
        @include flex(row, center, center);
        span {
            flex: 1;
            font-size: $base-size-s;
            text-align: center;

            b {
                color: red;
            }
        }
    }

    .content {
        flex: 1;
        width: 100%;
        overflow: auto;

        .item {
            margin-bottom: 2px;
            @include wh(100%, 110px*2);
            @include flex(row, flex-start, center);
            background: #fff;
            padding: 20px 20px 20px 0;
            // position: relative;
                div {
                    @include middle(110px*2);
                    &:nth-child(1) {
                        flex: 1;
                        @include flex(row, center, center);

                        span {
                            @include wh(35px, 35px);
                            line-height: 30px;
                            border-radius: 50%;
                            border: 3px solid gray;
                            color: #fff;
                            &.active{
                                background: #ab2b2b;
                                border: none;
                            }
                        }
                    }

                    &:nth-child(2) {
                        flex: 3;
                        img{
                            @include wh(100%, 100%);
                        }
                    }

                    &:nth-child(3) {
                        flex: 5;
                        position: relative;
                        p{
                            @include wh(100%, 33.3%);
                            display: flex;
                            align-items: center;
                            color: #000;
                            font-size: $base-size-m;
                            &:nth-child(3) {
                                color: red;
                            }
                            &:nth-child(1) {
                                overflow: hidden;
                            }
                        }
                        .handle{
                            position: absolute;
                            bottom: -47px;
                            right: -75px;
                            span{
                                display: inline-block;
                                @include wh(60px,60px);
                                @include middle(60px);
                                border: .5px solid #ddd;
                                font-size: .32rem;
                                &:nth-child(2){
                                    width: 100px;
                                }
                            }
                        }

                    }

                    &:nth-child(4) {
                        flex: 1;
                    }
                }
               
        }
    }

    .footer {
        @include wh(100%, 110px);
        background: #fff;
        box-shadow: rgba($color: #000000, $alpha: 0.5) 0 0 10px 0;
        z-index: 2;
        @include flex(row, flex-start, center);

        div {
            @include middle(110px);

            &:nth-child(1) {
                flex: 1;
                @include flex(row, center, center);

                span {
                    @include wh(35px, 35px);
                    line-height: 30px;
                    border-radius: 50%;
                    border: 3px solid gray;
                    color: #fff;
                    &.active{
                        background: #ab2b2b;
                        border: none;
                    }
                }
            }

            &:nth-child(2) {
                flex: 2;
            }

            &:nth-child(3) {
                flex: 2;

                span {
                    color: red;
                }
            }

            &:nth-child(4) {
                flex: 2;
            }

            &:nth-child(5) {
                flex: 3;
            }

            span {
                color: #000;
            }

            button {
                @include wh(260px, 100%);
                background: #ab2b2b;
                color: #fff;
                border: none;
                font-size: .3rem;
            }
        }
    }
}